// 生成环境配置
const { merge } = require('webpack-merge')
const common = require('./webpack.common')
// 抽离优化css
const MiniCssExtractPlugin = require("mini-css-extract-plugin");
const CssMinimizerPlugin = require("css-minimizer-webpack-plugin");
const webpack = require('webpack')

module.exports = merge(common, {
  // 模式
  mode: "production",
  module: {
    rules: [
      // 抽离
      {
        test: /\.css$/i,
        use: [MiniCssExtractPlugin.loader, "css-loader"],
      },
      {
        test: /\.scss$/i,
        use: [MiniCssExtractPlugin.loader, "css-loader", 'sass-loader'],
      },
    ]
  },
  plugins: [
    // 抽离css
    new MiniCssExtractPlugin(),
    // 打包进度条
    new webpack.ProgressPlugin()
  ],

  optimization: {
    minimizer: [
      // 在 webpack@5 中，你可以使用 `...` 语法来扩展现有的 minimizer（即 `terser-webpack-plugin`），将下一行取消注释
      // `...`,
      // 优化css
      new CssMinimizerPlugin(),
    ],
  },
})